<template>
  <!-- LOGIN -->
  <div class="row margin-right-0 standard-bg">
    <div class="container">
      <section class="registration col-lg-12 col-md-12">
        <div class="row secBg">
          <div class="large-12 columns">
            <div class="login-register-content">
              <div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
                <div class="col-md-12 text-center login-header">
                  <h1 class="title main-head-title" style="font-weight: 900;margin-bottom: 30px;">用户注册</h1>
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-4">
                  <div class="register-form">
                    <form method="post" data-abide novalidate>
                      <div class="input-group">
                        <span class="fa fa-user login-inputicon"></span>
                        <input type="text" id="nickname" placeholder="昵称" v-model="form.nickname" maxlength="20" required>
                        <span class="reg-warn" v-show="warn[0].isError">{{ warn[0].msg }}</span>
                      </div>
                      <div class="input-group">
                        <span class="fa fa-lock login-inputicon"></span>
                        <input type="password" id="password" placeholder="密码（6-16个字符组成，区分大小写）" v-model="form.password" minlength="6" maxlength="16" required>
                        <span class="reg-warn" v-show="warn[1].isError">{{ warn[1].msg }}</span>
                      </div>
                      <div class="input-group">
                        <span class="fa fa-phone login-inputicon"></span>
                        <input type="text" id="phone" @input="handlePhone" v-model="form.mobile" placeholder="请填写常用手机号" maxlength="11" required>
                        <span class="reg-warn" v-show="warn[2].isError">{{ warn[2].msg }}</span>
                      </div>
                      <div class="input-group" style="position: relative">
                        <span class="fa fa-comments login-inputicon"></span>
                        <input type="password" id="identify" @input="handleIdentify" v-model="form.smsCode" placeholder="请输入短信验证码" maxlength="6" required>
                        <div class="btn-identify-box">
                          <button type="button" class="btn btn-primary btn-identify" @click="sendSmsCode" :disabled="sendDis">{{ sendText }}</button>
                          <span class="reg-warn" v-show="warn[3].isError">{{ warn[3].msg }}</span>
                        </div>
                      </div>
                      <div>
                        <div class="checkbox">
                          <input id="remember" type="checkbox" name="check" value="remember" v-model="isSelected">
                          <label class="customLabel" for="remember" style="font-size: 12px">
                            我已同意
                              <a href="#" style="color: #02a7de;">《瑶光动漫用户协议》</a>和<a href="#" style="color: #02a7de;">《瑶光动漫隐私政策》</a>
                          </label>
                        </div>
                      </div>
                      <div class="reg-btn-box">
                        <button class="access-btn btn-reg" type="button" @click="reg" :class="{'btn-dis': !isSelected}" :disabled="!isSelected">注册</button>
                        <a :href="toLogin">已有账号，直接登录></a>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
/**
* @nickname 昵称
*
* */
import {mobileMsg, nicknameMsg, passwordMsg, reg, sendSmsCode, smsCodeMsg} from './reg-js'

export default {
  name: 'Reg',
  data () {
    return {
      form: {
        nickname: '',
        password: '',
        mobile: '',
        smsCode: ''
      },
      sendText: '发送验证码',
      sendDis: false,
      isSelected: false,
      toLogin: '/#/login',
      warn: [
        {isError: false, msg: ''},
        {isError: false, msg: ''},
        {isError: false, msg: ''},
        {isError: false, msg: ''}
      ]
    }
  },
  methods: {
    logChange (v) {
      console.log('click', v)
      this.isPwdLog = v
    },
    handlePhone () {
      this.form.mobile = this.form.mobile.replace(/[^0-9]+/g, '')
    },
    handleIdentify () {
      this.form.smsCode = this.form.smsCode.replace(/[^0-9]+/g, '')
    },
    sendSmsCode () {
      // 发送验证码
      sendSmsCode(this, this.form.mobile)
    },
    reg () {
      // 注册按钮
      reg(this)
    }
  },
  watch: {
    'form.nickname': function (val) {
      nicknameMsg(this, val)
    },
    'form.password': function (val) {
      passwordMsg(this, val)
    },
    'form.mobile': function (val) {
      mobileMsg(this, val)
    },
    'form.smsCode': function (val) {
      smsCodeMsg(this, val)
    }
  }
}
</script>

<style scoped>
.btn-dis {cursor:no-drop;background-color: gray;}
</style>
